var $ = require('jquery');
require('../css/index.css');
require('../css/index.scss');

$(function(){
    $('ul>li:odd').css('backgroundColor', 'red');
    $('ul>li:even').css('backgroundColor', 'pink');
});

// 引入React相关的类库
import React,{Component} from 'react' // 引入核心类库
import ReactDOM from 'react-dom' // 引入操作DOM的类库
// 引用无状态的组件
import {HelloComponent} from './components/NoStateComponents.jsx'
// 引用有状态的组件
import ES6Component, {test} from './components/ES6Component.jsx'
console.log(test);
// 引用受控表单组件
import FormComponent from './components/FormComponent.jsx'
import TodoList from './components/TodoList.jsx'
import Animation from './components/Animation.jsx'

// <h1>我是h1标题</h1>
const v1 =100;
const doms = <div>
        {
            /*这是注释，推荐使用这种方式*/
            //这是单行注释
        }
        <h1>{v1}</h1>
        <h2 title={v1} className="test">我是h2标题</h2>
   </div>;


var list = ['react', 'angular', 'vue','ooo','gggg'];

// 循环数组中的每一项，将循环出来的结果，放到h3标签中，并将这个h3标签反馈
const listResult = list.map((item, i )=>{
    return <h3 key={i}>{item}</h3>
});

ReactDOM.render(
   <div>
        {/*{listResult}
        <HelloComponent name="张三" />
        <ES6Component name="zs"/>
        <ES6Component name="ls"/>
        <ES6Component age={20}/>
        <FormComponent/>*/}
        {/*<TodoList/>*/}
        <Animation/>
   </div>,
    document.getElementById('app')
);//来将JSX中的HTML结构，渲染到页面上